<script lang="ts" setup>
import useOrientation from "../hooks/useOrientation";
const { isLandscape } = useOrientation();
</script>
<template>
  <div class="w-492 h-full b-3 b-dashed b-#DBDBDB relative bg-[transparent]">
    <!-- <QrcodeStream
          @detect="onDetect"
          @camera-on="onCameraReady"
          @error="onError"
          :torch="torchActive"
          v-if="isLandscape"
        /> -->
    <div class="absolute right-60 top-16 h-67 w-220">
      <div
        class="w-33 h-33 b-2 b-solid b-#FFDE30 absolute left-0 bottom-0"
      ></div>
      <div
        class="w-182 h-39 b-2 b-solid b-#FFDE30 absolute right-0 top-0"
      ></div>
    </div>
    <div v-if="isLandscape" class="scan-line"></div>
  </div>
</template>
<style lang="scss" scoped>
@keyframes scanLine {
  0% {
    top: 0;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

.scan-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(
    to bottom,
    rgba(0, 255, 0, 0),
    rgba(0, 255, 0, 1),
    rgba(0, 255, 0, 0)
  );
  box-shadow: 0 0 8px rgba(0, 255, 0, 0.6);
  animation: scanLine 2s linear infinite;
}
</style>
